<template>
	<view class="zy-column" style="height: 100vh">
		<view class="zy-status-bar"></view>
		
		<view class="zy-ph-lg zy-column zy-flex" >
			<!-- 标题 -->
			<view class="zy-row-between">
				<view class="zy-title-bar-title">发现</view>
				<view class="zy-row">
					<image class="zy-icon" mode="widthFix" :src="getImageUrl('find_title_love.png')"></image>
					<view class="zy-text-white-lg" @click="toVote">人气投票</view>
				</view>
			</view>
			<!-- 游历墙 -->
			<view class="zy-row-between zy-mt-50" @click="toDynamic">
				<view class="zy-row">
					<view class="zy-text-white-lg-bold">游历墙</view>
					<view class="zy-btn-yellow-sm-capsule zy-ml-sm">NEW</view>
				</view>
				<zy-arrow-right></zy-arrow-right>
			</view>
			<scroll-view class="zy-mt scroll" scroll-x="true">
				<!-- 头像，昵称，第一张动态图 -->
				<view class="dynamic-item" v-for="(item, index) in dynamicList" :key="index" @click="toDynamicComment(item)">
					<image class="zy-pic-bg zy-radius" mode="aspectFill" :src='item.fileUrl[0]'></image>
					<image class="zy-img-sm-circle" style="position: absolute; top:10rpx; left: 10rpx" mode="aspectFill" :src="item.headPicUrl"></image>
					<!-- dynamic_bottom -->
					<view class="zy-row dynamic_bottom">
						<view class="zy-text-white zy-font-bold zy-ml-lg">{{item.nick}}</view>
					</view>
				</view>
			</scroll-view>
			<view class="zy-text-white-lg-bold zy-mt-lg" style="font-size: 48rpx;">想认识TA吗？</view>
			<view class="zy-column-end zy-flex zy-mt-sm" style="position: relative;">
				<tantan :list="list" @love="toVote"></tantan>
			</view>
		</view>
	</view>
</template>

<script>
	import tantan from '@/components/dgex-tantan/dgex-tantan.vue'
	import RouteUtil from '@/main/common/RouteUtil.js'
	import CacheUtil from '@/main/common/CacheUtil.js'
	export default {
		components: {
		  tantan
		},
		data() {
			return {
				list:[],
				dynamicList:[]
			}
		},
		onLoad() {
			// this.requestDynamicList()
		},
		onShow() {
			this.requestList()
			this.requestDynamicList()
		},
		methods: {
			toDynamic(){
				RouteUtil.toDynamicPerson(1, CacheUtil.getUserId())
			},
			toDynamicComment(entity){
				RouteUtil.toDynamicComment(entity)
			},
			toVote(item){
				RouteUtil.toVote()
			},
			requestList(){
				const params = {
					pageNo: 1,
					type: '1'
				}
				uni.$http.get("/api/user/getUserPage", params)
					.then(res => {
						this.list = res.data;
					}).catch(res => {
					})
			},
			requestDynamicList(){
				const params = {
					pageNo: 1,
					type: '1'
				}
				uni.$http.get("/api/dynamic/getDynamicList", params)
					.then(res => {
						this.dynamicList = res.data;
						console.log("this.dynamicList: " + JSON.stringify(this.dynamicList.length));
					}).catch(res => {
					})
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}
	
	.scroll {
		white-space: nowrap;
		width: 100%;
		height: 320rpx;
		margin-top: 20rpx;
		box-sizing: border-box;
		
		.dynamic-item{
			display: inline-block;
			position: relative;
			width: 240rpx;
			height: 320rpx;
			line-height: 320rpx;
			border-radius: 15rpx;
			border: 1rpx solid #707070;
			margin-right: 20rpx;
			
			.dynamic_bottom{
				position: absolute;
				bottom: 0;
				left: 0;
				right: 0;
				height: 80rpx;
				background: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000000 100%);
				border-radius: 15rpx;
			}
		}
	}
	
	.love-card{
		height: 489rpx;
		background: linear-gradient(360deg, rgba(0,0,0,0.87) 0%, rgba(3,3,3,0.87) 13%, rgba(20,19,19,0) 82%, rgba(24,23,23,0) 100%);
		opacity: 1;
		border-radius: 30rpx;
	}
	
	.love-bg{
		width: 250rpx;
		height: 90rpx;
		background: rgba(#fff, 0.22);
		border-radius: 90rpx;
		margin: 20rpx 50rpx;
	}
	
	
	
</style>
